import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './style.css'
import { Toaster } from "@/components/ui/toaster"

// 自定义苹果风格主题
const appleThemeToaster = {
  className: "apple-toaster",
  toastClassName: ({ className }: { className?: string }) => 
    `apple-glassmorphism rounded-2xl shadow-lg p-4 flex gap-2 items-start ${className}`,
  iconClassName: "apple-gradient-text",
  titleClassName: "text-base font-medium text-[#1d1d1f]",
  descriptionClassName: "text-sm text-[#86868b]",
  actionClassName: "bg-[#0071e3] text-white rounded-full px-4 py-1.5 text-xs font-medium",
  cancelClassName: "text-xs text-[#86868b] hover:text-[#1d1d1f]",
}

// 延迟加载应用，以便加载动画更流畅
setTimeout(() => {
  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <App />
      <Toaster 
        position="top-center"
        toastOptions={{
          duration: 3000,
          className: appleThemeToaster.toastClassName({}),
        }}
      />
    </React.StrictMode>,
  )
}, 100)
